<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="音乐,QQ音乐,在线听歌,音乐下载,音乐播放器,音乐网站,MV,巅峰榜,音乐排行榜,翻译歌曲,热门歌曲,经典老歌,无损音乐,无损曲库">
    <meta name="description" content="QQ音乐是腾讯公司推出的一款网络音乐服务产品，海量音乐在线试听、新歌热歌在线首发、歌词翻译、手机铃声下载、高品质无损音乐试听、海量无损曲库、正版音乐下载、空间背景音乐设置、MV观看等，是互联网音乐播放和下载的优选。">
    <title>歌手列表 - QQ音乐-千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>
    <!-- 引入标题图标 -->
    <link rel="shortcut icon" href="./网站图标.ico" type="image/x-icon">
    <!-- 引入基础公共样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入list样式 -->
    <link rel="stylesheet" href="./css/list.css">
    <style>
         a.active{
            background-color: #31c27c;
            color: #fff !important;
        }
        .singer-list a.ins {
            color: #31c27c;
        }

    </style>
</head>
<body cookie="2" data-id="2">
    <script> document.cookie="2"</script>

    <iframe  id="ifr1" src="../代普/mod_header.html" scrolling="no" frameborder="0"
    style="position: absolute;top:0px; width:100%; z-index:99; height: 250px;display: flex;">
</iframe>
<iframe  id="ifr2" src="../代普/guding.html" scrolling="no" frameborder="0"
style="position: fixed;bottom:0px;right: 0px; width: 100px; z-index:99; height: 250px;display: flex;">
</iframe>

    <!-- banner图 -->
    <div class="banner">
        <div class="section_inner">
            <h2>万千歌手，尽在眼前</h2>
            <p>登录查看你关注的歌手</p>
            <button>立即登录</button>
        </div>
    </div>
    
    <!-- 搜索引擎 -->
    <div class="search max">
        <div class="singer-list listOne">
            <a class="active">全部</a>
            <a>A</a>
            <a>B</a>
            <a>C</a>
            <a>D</a>
            <a>E</a>
            <a>F</a>
            <a>G</a>
            <a>H</a>
            <a>J</a>
            <a>K</a>
            <a>L</a>
            <a>M</a>
            <a>N</a>
            <a>O</a>
            <a>P</a>
            <a>Q</a>
            <a>R</a>
            <a>S</a>
            <a>T</a>
            <a>U</a>
            <a>V</a>
            <a>W</a>
            <a>X</a>
            <a>Y</a>
            <a>Z</a>
            <a>#</a>
        </div>
        <div class="singer-list listTwo">
            <a class="active">全部</a>
            <a>内地</a>
            <a>港台</a>
            <a>欧美</a>
            <a>日本</a>
            <a>韩国</a>
        </div>
        <div class="singer-list listThree">
            <a class="active">全部</a>
            <a>男</a>
            <a>女</a>
            <a>组合</a>
        </div>
        <div class="singer-list listFour">
            <a class="active">全部</a>
            <a>流行</a>
            <a>国风</a>
            <a>摇滚</a>
            <a>电子</a>
            <a>民谣</a>
            <a>R&B</a>
            <a>民族乐</a>
            <a>轻音乐</a>
            <a>爵士</a>
            <a>古典</a>
            <a>乡村</a>
            <a>蓝调</a>
        </div>
    </div>

    <!-- 主体内容 -->
    <div class="content max">
        <div class="content-list">
            <a>
                <img src="./img/focus1.jpg" alt="">
            </a>
            <a>周杰伦</a>
        </div>
        <div class="content-list">
            <a>
                <img src="./img/focus2.jpg" alt="">
            </a>
            <a>G.E.M. 邓紫棋</a>
        </div>
        <div class="content-list">
            <a>
                <img src="./img/focus3.jpg" alt="">
            </a>
            <a>林俊杰</a>
        </div>
        <div class="content-list">
            <a>
                <img src="./img/focus4.jpg" alt="">
            </a>
            <a>薛之谦</a>
        </div>
        <div class="content-list">
            <a>
                <img src="./img/focus5.jpg" alt="">
            </a>
            <a>陈奕迅</a>
        </div>
        <div class="content-list">
            <a>
                <img src="./img/focus6.jpg" alt="">
            </a>
            <a>告五人</a>
        </div>
        <div class="content-list">
            <a>
                <img src="./img/focus7.jpg" alt="">
            </a>
            <a>时代少年团</a>
        </div>
        <div class="content-list">
            <a>
                <img src="./img/focus8.jpg" alt="">
            </a>
            <a>王靖雯</a>
        </div>
        <div class="content-list">
            <a>
                <img src="./img/focus9.jpg" alt="">
            </a>
            <a>蔡健雅</a>
        </div>
        <div class="content-list">
            <a>
                <img src="./img/focus10.jpg" alt="">
            </a>
            <a>王源</a>
        </div>
    </div>

    <!-- 文本内容 -->
    <div class="content-text max">
        <div class="content-text-list">
            <a href="#">许嵩</a>
        </div>
        <div class="content-text-list">
            <a href="#">李易峰</a>
        </div>
        <div class="content-text-list">
            <a href="#">张伟</a>
        </div>
        <div class="content-text-list">
            <a href="#">杨迪</a>
        </div>
        <div class="content-text-list">
            <a href="#">朱润</a>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="footer">
        <!-- 版心 -->
        <div class="container">
            <!-- 底部上方 -->
            <div class="footer-top">
                <!-- 底部客户端 -->
                <div class="footer-client">
                    <h3>下载QQ音乐客户端</h3>
                    <div class="footer-img">
                        <a href="#">
                            <i></i>
                            <span>PC版</span>
                        </a>
                        <a href="#">
                            <i></i>
                            <span>Mac版</span>
                        </a>
                        <a href="#">
                            <i></i>
                            <span>Android版</span>
                        </a>
                        <a href="#">
                            <i></i>
                            <span>iphone版</span>
                        </a>
                    </div>
                    <h3>开方平台</h3>
                    <div class="footer-list">
                        <a href="#">QQ音乐开放平台</a>
                        <a href="#">腾讯音乐人</a>
                        <a href="#">音乐推</a>
                    </div>
                </div>
                <!-- 底部产品 -->
                <div class="footer-product">
                    <h3>特色产品</h3>
                    <div class="footer-img">
                        <a href="#">
                            <i></i>
                            <span>全民K歌</span>
                        </a>
                        <a href="#">
                            <i></i>
                            <span>银河音效</span>
                        </a>
                        <a href="#">
                            <i></i>
                            <span>Qplay</span>
                        </a>
                        <a href="#">
                            <i></i>
                            <span>Fan直播伴侣</span>
                        </a>
                    </div>
                    <h3>TME集团官网</h3>
                    <div class="footer-list">
                        <a href="#">腾讯音乐</a>
                    </div>
                    <div class="footer-absolute">
                        <a href="#">车载互联</a>
                        <a href="#">QQ演出</a>
                    </div>
                </div>

                <!-- 底部链接 -->
                <div class="footer-link">
                    <h3>合作链接</h3>
                    <div class="footer-text">
                        <ul class="clearfix">
                            <li><a href="#">cj ENM</a></li>
                            <li><a href="#">腾讯视频</a></li>
                            <li><a href="#">手机QQ空间</a></li>
                            <li><a href="#">最新版QQ</a></li>
                            <li><a href="#">腾讯社交广告</a></li>
                            <li><a href="#">电脑管家</a></li>
                            <li><a href="#">QQ浏览器</a></li>
                            <li><a href="#">腾讯微云</a></li>
                            <li><a href="#">腾讯云</a></li>
                            <li><a href="#">企鹅FM</a></li>
                            <li><a href="#">智能电视网</a></li>
                            <li><a href="#">当贝市场</a></li>
                            <li><a href="#">酷我音乐</a></li>
                            <li><a href="#">酷狗听书</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 底部下方 -->
            <div class="footer-bottom">
                <p>
                    <a href="#">关于腾讯</a>|
                    <a href="#">About Tencent</a>|
                    <a href="#">服务条款</a>|
                    <a href="#">用户服务协议</a>|
                    <a href="#">隐私政策</a>|
                    <a href="#">权力声明</a>|
                    <a href="#">广告服务</a>|
                    <a href="#">腾讯招聘</a>|
                    <a href="#">客服中心</a>|
                    <a href="#">网站导航</a>|
                    <a href="#">举报中心</a>
                </p>
                <p>Copyright © 1998 - 2022 Tencent.All Rights Reserved.</p>
                <p>
                    <a href="#">腾讯公司 版权所有</a>| 
                    <a href="#">营业执照</a>|
                    <a href="#">网络文化经营许可证：粤网文[2020]3396-195号</a>|
                    <a href="#">客服电话:</a>|
                    <a href="#">4006016666</a>|
                    <a href="#">违法与不良信息举报邮箱：</a>|
                    <a href="#">tme_musicjubao@tencentmusic.com</a>
                </p>
            </div>
        </div>
    </div>

   
    <script src="./js/list.js"></script>
    <script>
       
   

        // 二级导航栏实现点击颜色切换效果
        const listOne = document.querySelectorAll('.listOne a')
        const listTwo = document.querySelectorAll('.listTwo a')
        const listThree = document.querySelectorAll('.listThree a')
        const listFour = document.querySelectorAll('.listFour a')
            for (let i =0;i<listOne.length;i++){
                // 鼠标移入时给a标签添加类名ins时a标签文本显示为绿色
                listOne[i].addEventListener('mouseenter',function(){
                      this.classList.add('ins')
                })
                // 鼠标移出时删除a标签类名ins使a标签文本显示为黑色
                listOne[i].addEventListener('mouseleave',function(){
                    this.classList.remove('ins')
                })
                // 鼠标点击a标签的效果
                listOne[i].addEventListener('click',function(){
                    document.querySelector('.listOne a.active').classList.remove('active')
                    listOne[i].classList.add('active')
                })
            }
            for (let i =0;i<listTwo.length;i++){
                listTwo[i].addEventListener('mouseenter',function(){
                    this.classList.add('ins')
                })
                listTwo[i].addEventListener('mouseleave',function(){
                    this.classList.remove('ins')
                })
                listTwo[i].addEventListener('click',function(){
                    document.querySelector('.listTwo a.active').classList.remove('active')
                    listTwo[i].classList.add('active')
                })
            }
            for (let i =0;i<listThree.length;i++){
                listThree[i].addEventListener('mouseenter',function(){
                    this.classList.add('ins')
                    // console.log('#31c27c');
                })
                listThree[i].addEventListener('mouseleave',function(){
                    this.classList.remove('ins')
                    // console.log('#31c27c');
                })

                listThree[i].addEventListener('click',function(){
                    this.classList.remove('ins')
                    document.querySelector('.listThree a.active').classList.remove('active')
                    listThree[i].classList.add('active')
                })
            }
            for (let i =0;i<listFour.length;i++){
                listFour[i].addEventListener('mouseenter',function(){
                    this.classList.add('ins')
                })
                listFour[i].addEventListener('mouseleave',function(){
                    this.classList.remove('ins')
                })
                listFour[i].addEventListener('click',function(){
                    document.querySelector('.listFour a.active').classList.remove('active')
                    listFour[i].classList.add('active')
                })
            }
            
    </script>
    <script src="../代普/js/ifr.js"></script>

</body>
</html>